// import { useRef, useEffect } from 'react';

// function App() {
//   const ref = useRef(null);

//   // 不符合纯函数的规范，该函数有副作用操作
//   setTimeout(() => {
//     ref.current.focus();
//   }, 3000);
//   const handleClick = () => {
//     ref.current.focus(); //事件回调函数，符合纯函数的规范，因为事件是可以处理副作用
//   };
//   // 包含副作用的组件通常需要在特定生命周期阶段执行某些操作，例如发起网络请求、设置定时器或操作 DOM。
//   // 使用 useEffect 钩子处理副作用
//   // React 提供了 useEffect 钩子来处理副作用。useEffect 可以让你在组件渲染后执行副作用操作，并在组件卸载时清理这些副作用
//   useEffect(() => {
//     ref.current.focus();
//   });
//   return (
//     <div>
//       hello App
//       <button onClick={handleClick}>forwardRef操作</button>
//       <br />
//       <input ref={ref} />
//     </div>
//   );
// }
// export default App;
import { useEffect, useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  // 初始渲染和更新渲染，都会触发useEffect() -> 因为每次渲染JSX后(return（<div>...</div>）)，后会触发useEffect()，整个当前函数组件作用域的最后时机触发的
  useEffect(() => {
    console.log(count);
  });

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      hello App
      <button onClick={handleClick}>点击</button> {count}
    </div>
  );
}

export default App;
